
<template>
<div >
    <div class="background">
      <img :src="imgSrc" width="100%" height="100%" alt="" />
    </div>
    <div style="position:absolute;left:200px;top:270px;width:1500px;">
            <div >
                <h1>欢迎注册</h1>
            </div>
        <div>
            <el-form ref="form" class="form-input"  > 
                
                <el-form-item >
                    <el-input v-model="user.account" placeholder="账号" clearable @blur="email_tel"></el-input>                   
                </el-form-item> 
                 
                     {{message}}
                 
                <el-form-item>
                    <el-input v-model="user.nickname" placeholder="昵称" clearable></el-input> 
                </el-form-item>    
                <el-form-item >
                    <el-input v-model="user.pwd" placeholder="密码" show-password></el-input> 
                </el-form-item>  
                <el-form-item >
                    <el-input v-model="pwd" placeholder="确认密码"    show-password ></el-input> 
                </el-form-item> 
            </el-form>
        </div>
        <div >    
            <el-button  @click="goto()">返回登陆</el-button> 
            <el-button  @click="register()">确定注册</el-button>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            message:'',
            ruleFlag:0,
            imgSrc:require('.././assets/bgd.jpg'),
            state:0,
            pwd:'',
            user:{  
                account:'',
                pwd:'',
                nickname:''
            },
        }
    },
    methods: {
        register(){
            if(this.user.account==''||this.user.pwd==''){
                //alert("账号不能为空");
                this.$alert('账号密码不能为空', '注册提示', {
                confirmButtonText: '知道了，马上去填写',})
            }
            else if(this.user.nickName==''){
                this.$alert('请填一下昵称', '注册提示', {
                confirmButtonText: '知道了，马上去填写',})
            }
            else if(this.pwd!=this.user.pwd){
                this.$alert( '两次密码不一致', {confirmButtonText: '知道了',})
            }
            else if(this.ruleFlag==1){
                this.$alert( '请输入正确的邮箱或者手机号作为账号', {confirmButtonText: '知道了',})
            }
            else{
                console.log(this.user)
                this.$axios.post('http://localhost:8082/register',this.user)
                .then(res=>{
                    //注册成功就返回登录页面
                    if(res.data.code==2000){
                        this.$alert( '注册成功', {confirmButtonText: '知道了',})
                        this.$router.push('/login');
                    }
                    else if(res.data.code==2001){
                         this.$alert( '该账号已存在', {confirmButtonText: '知道了',})                       
                    }
                    
                })
            }
           
        },
        goto(){
            this.$router.push('/login');
        },
        cpmpare(e){
            if(this.pwd==this.user.pwd){
                this.state=1;
            }
            else{
                this.state=0;
                 this.$alert( '两次密码不一致', {confirmButtonText: '知道了',})
            }
            console.log(this.state);
             console.log(e);
        },
        email_tel(){
                var verify = (/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/);
                var verify1=(/^1[3456789]\d{9}$/)
                if ((verify.test(this.user.account))||(verify1.test(this.user.account))) {
                    this.message = ''
                    this.ruleFlag=0;
                } else {
                    this.message = '请输入正确邮箱或者手机号'
                    this.ruleFlag=1;
                }

        }
    }

};
    
</script>
<style scoped>
.form-input{
    width: 20%;
    margin: auto;
}
.background{
    width:100%;  
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
}
</style>